<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <uv-search
                    placeholder="请输入产品名称"
                    v-model="keyword"
                    :showAction="false"
                    bgColor="#f7f8fa"
                    @search="OnRefresh"
                ></uv-search>
            </view>
        </view>
    
        <scroll-view
            v-if="ProductList.length > 0"
            class="list"
            :refresher-triggered="Triggered"
            :refresher-enabled="true"
            :lower-threshold="100"
            :style="{ height: `${height}px`}"
            :scroll-y="true"
            @scroll="OnScroll"
            @refresherrefresh="OnRefresh"
            @scrolltolower="OnBottom"
            :scroll-top="top">
            <navigator
                class="item"
                v-for="(item, key) in ProductList"
                :key="key"
                :url="`/pages/validate/info?code=${item.query_code}`"
            >
                <view class="title">{{ item.products.name }}</view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name"> 查询次数： </view>
                        <view class="value">{{ item.query_num }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name"> 您查询的防伪码： </view>
                        <view class="value">{{ item.query_code }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name"> 首次查询时间： </view>
                        <view class="value">{{ item.query_time_text }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name"> 小程序码： </view>
                        <view class="value">
                            <image src="/static/images/code.png" />
                        </view>
                    </view>
                </view>
            </navigator>
            
            <uv-load-more :status="status" marginBottom="40" fontSize="18" lineColor="#888" dashed line />
        </scroll-view>
        
        <view class="backBtn" v-if="top >= 250" @click="BackToTop">
            <uv-icon name="arrow-upward"></uv-icon>
        </view>
    </view>
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    
    let business = proxy.$business
    
    let notice = ref()
    
    // 下拉刷新
    let Isfreshing = ref(false)
    let Triggered = ref(false)
    let ProductList = ref([]) //商品列表
    let page = ref(1) //分页
    let status = ref('loadmore') //加载更多
    let keyword = ref('') //关键词
    let height = ref(0) //页面高度
    let top = ref(0)
    
    // 页面显示 判断是否登录
    onShow(() => {
        if(Object.getOwnPropertyNames(business.value).length <= 0)
        {
            notice.value.show({
                type: 'error',
                message: '请先登录',
                complete: () => {
                    uni.$uv.route({
                        type: 'reLaunch',
                        url: '/pages/business/index'
                    })
                }
            })
            
            return false
        }
        
        // 刷新
        OnRefresh()
    })
    
    // 页面渲染完成 获取系统设备信息
    onReady(() => {
        uni.getSystemInfo({
            success: res => height.value = res.windowHeight
        })
    })
    
    // 下拉过程
    const OnScroll = (e) => top.value = e.detail.scrollTop
    
    // 返回顶部
    const BackToTop = () => top.value = 0
    
    // 下拉刷新
    const OnRefresh = async () => {
        // 防止重复下拉刷新
        if(Isfreshing.value) return
        
        Isfreshing.value = true
        
        if(!Triggered.value) Triggered.value = true  // 正在下拉刷新
        
        // 清空数据
        page.value = 1
        ProductList.value = []
        
        // 请求数据
        GetProductData()
    }
    
    // 上拉加载
    const OnBottom = async () => GetProductData()
    
    // 请求获取已购买商品数据
    const GetProductData = async () => {
        let params = {
            page: page.value,
            busid: business.value.id,
            keyword: keyword.value
        }
        
        let result = await uni.$uv.http.post('/business/ProductIndex', params)
        
        if(Triggered.value) Triggered.value = false
        if(Isfreshing.value) Isfreshing.value = false
        
        if(result.code == 0)
        {
            status.value = 'nomore'
            return false
        }
        
        ProductList.value = ProductList.value.concat(result.data)
        page.value++
    }
</script>

<style>
	page
	{
		background-color: #eee;
	}

	.container
	{
		width: 95%;
		margin: 0 auto;
		padding-bottom: 26px;
	}

	.header
	{
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
	}

	.header .search
	{
		width: 95%;
		margin: 0 auto;
	}

	.item
	{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.item .title
	{
		padding: 10px 0 10px 5px;
		font-size: 20px;
	}

	.item .line
	{
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.item .son-list .son-item
	{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.item .son-list .son-item .name
	{
		color: #9b9b9a;
	}

	.item .son-list .son-item image
	{
		width: 30px;
		height: 30px;
	}
    
    .backBtn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e1e1e1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 40px;
        right: 20px;
    }
</style>
